<template>
  <div class="abf">
      <el-container>
        <el-aside  width="auto">
           <el-menu
                :collapse="isopen"
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#304156"
                text-color="#fff"
                active-text-color="#ffd04b" style="height:100%;">
                <el-menu-item @click="click()" style="height: 6%;background-color: #000000;">
                        <span slot="title" style="color: #FFFFFF;padding-right: 20px;"><i class="el-icon-loading"></i>考试系统</span>
                 </el-menu-item>
                <el-submenu index="1" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_TEACHER'">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span style="padding-right: 50px;">系统管理</span>
                  </template>
                   <el-menu-item-group>
                        <el-menu-item index="1-2" @click="jsgl()"><i class="el-icon-user-solid"></i>教师管理</el-menu-item>
                        <el-menu-item index="1-5" @click="xsgl()"><i class="el-icon-user"></i>学生管理</el-menu-item>
						            <el-menu-item index="1-3" @click="bjgl()"><i class="el-icon-bell"></i>班级管理</el-menu-item>
                        <el-menu-item index="1-6" @click="kcgl()"><i class="el-icon-s-order"></i>课程管理</el-menu-item>
                   </el-menu-item-group>
                </el-submenu>
               <el-submenu index="2" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_STUDENT'">
                 <template slot="title">
                   <i class="el-icon-s-order"></i>
                   <span style="padding-right: 50px;">考试管理</span>
                 </template>
                  <el-menu-item-group>
                       <el-menu-item index="2-1" @click="examgl()"><i class="el-icon-s-promotion"></i>在线考试</el-menu-item>
                       <el-menu-item index="2-9" @click="student()"><i class="el-icon-s-promotion"></i>在线考试lainxi</el-menu-item>
                       <el-menu-item index="2-2" @click="cjcx()"><i class="el-icon-s-release"></i>成绩查询</el-menu-item>
                       <el-menu-item index="2-3" @click="sjsz()"><i class="el-icon-setting"></i>试卷设置</el-menu-item>
                  </el-menu-item-group>
               </el-submenu>
               <el-submenu index="3" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_TEACHER'">
                 <template slot="title">
                   <i class="el-icon-edit"></i>
                   <span style="padding-right: 50px;">试题管理</span>
                 </template>
                  <el-menu-item-group>
                       <el-menu-item index="3-2" @click="tkgl()"><i class="el-icon-s-claim"></i>题库管理</el-menu-item>
                    	 <el-menu-item index="3-3" @click="stgl()"><i class="el-icon-s-order"></i>试题管理</el-menu-item>
                    	 <el-menu-item index="3-4" @click="zsdgl()"><i class="el-icon-date"></i>知识点管理</el-menu-item>
                  </el-menu-item-group>
               </el-submenu>
               <el-submenu index="4" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_TEACHER'||roles==='role_STUDENT'">
                 <template slot="title">
                   <i class="el-icon-setting"></i>
                   <span style="padding-right: 50px;">其他管理</span>
                 </template>
                 </el-submenu>
              </el-menu>
        </el-aside>
        <el-container>
            <el-header style="height:6%;">
              <i  :class="headericon" @click="headericons()" style="float:left;font-size:20px;padding:20px 0;padding-right: 15px;"></i>
              <span style="float:left ;font-weight:bold;font-size: 23px;">
                Computer-based system--机考系统
               </span>
               <span style="margin-left:40%;font-size:15px;">
                {{name}} , 欢迎您!
               </span>
               <span style="position: absolute;left: 88%;">
                  <el-button type="text" icon="el-icon-s-help" @click="alter()" >修改密码</el-button>
                  <el-button type="text" icon="el-icon-delete-solid" @click="logout()">退出登录</el-button>
               </span>
            </el-header>
          <el-main>
                <router-view></router-view>
          </el-main>
          <el-footer style="height:6%;">
            <span>
              &copy 2021 Computer-based system;
            </span>
            <span style="position: absolute;right: 10px;">
              {{nowTime}}
            </span>
          </el-footer>
        </el-container>
    </el-container>
  </div>

</template>

<script>
    import {mapState} from 'vuex';
    import {mapMutations} from 'vuex';
    export default {
    data() {
      return {
           headericon:'el-icon-s-fold',
           isopen:false,
           nowTime:'',
		       dialogVisible: false,
		       roles:'',
		 	     name:'',
		 	   }
		 	},
      methods: {
       headericons(){
       				 this.isopen==false?this.isopen=true:this.isopen=false;
       				 this.headericon=='el-icon-s-fold'?this.headericon='el-icon-s-unfold'
       				 :this.headericon='el-icon-s-fold'
       			},
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
            let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
            let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
            let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
            this.nowTime = year + "." + month + "." + date +"  "+"星期"+'日一二三四五六'.charAt(new Date().getDay())+" "+hh+":"+mm ;
          },
          nowTimes(){
            this.timeFormate(new Date());
            setInterval(this.nowTimes,1000);
            this.clear()
          },
          click(){
            this.$router.push('/new')
          },
          clear(){
            clearInterval(this.nowTimes)
            this.nowTimes = null;
          },
          ksxx(){
            this.$router.push('/ksxx')
          },
          zxks(){
            this.$router.push('/zxks')
          },
          cjcx(){
            this.$router.push('/cjcx')
          },
          jsgl(){
            this.$router.push('/jsgl')
          },
          xsgl(){
            this.$router.push('/xsgl')
          },
          bjgl(){
            this.$router.push('/bjgl')
          },
          kcgl(){
            this.$router.push('/kcgl')
          },
          classcourse(){
          this.$router.push('/classcourse')
          },
          examgl(){
            this.$router.push('/examgl/index')
          },
          alter(){
            this.$router.push('/password')
          },
          stgl(){
            this.$router.push('/teacher/stgl')
          },
          tkgl(){
          	this.$router.push('/teacher/tkgl')
          },
          examgl(){
            this.$router.push('/exam/zxks')
          },
          sjsz(){
            this.$router.push('/teacher/sjsz')
          },
          zsdgl(){
                  this.$router.push('/exam/zsdgl')
          },
          student(){
            this.$router.push('/studentmian')
          },
          logout(){
               this.$ajax.post('logout',{}).then(res=>{
                 var result=res.data;
                 if(result.success){
                   this.$notify.success({
                     title:'提示',
                     message:'注销成功',
                     position:'bottom-right'
                   });
                   window.sessionStorage.clear();
                   this.$router.replace('/');
                   window.location.reload();
                 }
               })
             }
        },
        mounted() {
           this.nowTimes();
          },
        created() {
           this.roles= window.sessionStorage.getItem("roles");
           this.name=window.sessionStorage.getItem("name");
            console.log("1");
           console.log(this.roles)
         },
		  };


</script>

<style>
  html,body,#app,.abf,.el-container{
    padding: 0px;
    margin: 0px;
    height:100%;
    overflow-x:hidden;
    overflow-y:hidden;
  }

.el-submenu__title:hover{
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.el-menu-item:hover{
  background-color: rgba(134, 134, 134, 0.3)  !important;
}
   .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 6vh;
    }

   .el-submenu__title {
        font-size: 14px;
        color: #e7ecf5;
     }
    .el-menu-item {
         font-size: 14px;
         color: #e8eeef;
       }

   .el-aside {
      display: block;
      position: relative;
      overflow-x: hidden;
      overflow-y: hidden;
      text-align: center;
      line-height: 200px;
    }
    .el-main {
      background-color: #ffffff;
      color: #333;
      overflow-y:hidden ;
      /* text-align: center; */
      /* line-height:83vh; */
    }

    body > .el-container {
      margin-bottom: 40px;
    }

     .el-container:nth-child(7) .el-aside {
       line-height: 320px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	  }
</style>
